<template>
  <van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
    <div class="perm-container">
      <van-nav-bar
        left-text="授权与协议"
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="bgc">
        <div class="pic">
          <van-image
            width="100%"
            class="avatar"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
            round
            fit="cover"
          />
          <span class="text">XXX</span>
        </div>
      </div>
      <div class="box">
        <span class="remind">
          &nbsp; &nbsp; &nbsp; &nbsp;
          湖南家政平台在此特别提醒您(家服员、家政员)在阅读前,
          请认真阅读本《授权协议》(以下简称“协议”)请您谨慎阅读井选择接受或者不
          接受本协议。本协议由湖南家政平台根据国家政策实时更新,更新后协议条款一
          旦公布即代替原来的协议条款,恕不另行通知。</span
        >
        <span class="remind">一、本人自愿中请建立家庭服务员信用记录</span>
        <span class="remind"
          >本人自愿加入湖南家政平台,湖南家政平台可以使用本身份信息、肖像
          信息、家庭服务信息和职业信息:身份信息包含但不限于身份证号码,姓名,性别,
          民族,家庭住址健康状况,教育水平等;职业信息包含但不限于从业经历培训情况
          、培训考核情况、消费者评价和投诉情况等</span
        >
        <span class="remind">二、本人承诺:</span>
        <span class="remind">本人自愿加入湖南家政平台,湖南家政平台可以使用本身份信息、肖像信息、家庭
        服务信息和职业信息:身份信息包含但不限于身份证号码,姓名,性别,民族,家庭住
        址健康状况,教育水平等:职业信息包含但不限于从业经历,培训情况、培训考核情
        况、消费者评价和投诉情况等</span>
        <span class="remind"
          >请点击:我也已阅读井同意以上协议“按钮,代表您同意本协议的全部内容
          ,并授权您在诚信平台的所有资料都可以向消费者显示。</span
        >
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      require: true,
    },
  },
  methods: {
    onClickLeft () {
      this.$emit('update:show', false)
    },
  },
}
</script>

<style scoped lang="scss">
.perm-container {
  background-color: #f8f8f8;
  height: 100vh;
  .bgc {
    position: relative;
    height: 300px;
    background-color: #3f51b5;
    z-index: 99999999999;
  }
  .pic {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .avatar {
      width: 160px !important;
      height: 160px;
    }
    .text {
      margin-top: 30px;
      font-size: 35px;
      font-weight: 600;
      color: #fff;
    }
  }
  .box {
    position: relative;
    transform: translateY(-55px);
    margin: 0 30px;
    height: 900px;
    padding: 0 20px;
    background-color: #fff;
    border-radius: 20px;
    z-index: 9999999999999;
  }
  .remind {
    font-size: 22px;
  }
}
</style>
